<template>
<div>

  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="开始时间">
      <el-date-picker
        v-model="form.startTime"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间">
      <el-date-picker
        v-model="form.endTime"
        value-format="yyyy-MM-dd"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="选择统计方式">
      <el-select v-model="form.statisticstype" placeholder="选择查询方式">
        <el-option label="统计热门菜品销售数量" value=4></el-option>
        <el-option label="统计食客增长数量" value=3></el-option>
        <el-option label="统计订单增长数量" value=1></el-option>
        <el-option label="统计订单增长金额" value=2></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="tongji">查询</el-button>
      <el-button type="primary" @click="changebar">柱状图</el-button>
      <el-button type="primary" @click="changeline">折线图</el-button>
    </el-form-item>
  </el-form>

  <div class="echart" id="mychart" :style="myChartStyle"></div>

</div>
</template>

<script>
import * as echarts from "echarts";
import {statisticsnum} from "@/api/order/order";

export default {
  data(){
    return{
      xData: [], //横坐标
      yData: [], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      form:{
        statisticstype:null,
        startTime:'',
        endTime:'',
      },
      pickerOptions:{
        shortcuts: [{
          text:'今天',
          onClick(picker){
            picker.$emit('pick', new Date());
          }
        },{
          text:'昨天',
          onClick(picker){
            const date= new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick',date);
          }
        },{
          text:'一周前',
          onClick(picker){
            const date= new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick',date);
          }
        }]
      },
      shape:'bar',
      foodmax:null,
      foodsort:null,
    };
  },
  methods:{
    changebar(){
      this.shape='bar';
      this.initEcharts();
    },
    changeline(){
      this.shape='line';
      this.initEcharts();
    },
    tongji(){
      statisticsnum(this.form).then(resp=>{
        this.foodsort=null;
        this.foodmax=null;
        this.xData=[];
        this.yData=[];
        if(resp.code==200){
          if(this.form.statisticstype==3){
            for(var i in resp.data){
              this.xData.push(resp.data[i].orderTime);
              this.yData.push(resp.data[i].peopleNum);
            }
          };
          if(this.form.statisticstype==4){
            for(var i in resp.data){
              this.foodmax=6;
              this.foodsort=true;
              this.xData.push(resp.data[i].dishesName);
              this.yData.push(resp.data[i].dishesNum);
            }
          };
          if(this.form.statisticstype==1){
            for(var i in resp.data){
              this.xData.push(resp.data[i].orderTime);
              this.yData.push(resp.data[i].orderNum);
            }
          };
          if(this.form.statisticstype==2){
            for(var i in resp.data){
              this.xData.push(resp.data[i].orderTime);
              this.yData.push(resp.data[i].orderMoney);
            }
          }
          this.initEcharts();
        }
      })
    },

//============================
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData,
          max:this.foodmax,
          inverse: this.foodsort,
        },
        yAxis: {},
        series: [
          {
            type: this.shape, //形状为柱状图
            data: this.yData,
            barWidth: "20%",//样式
            label:{
              show:true,
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  mounted() {

  }
}
</script>

<style>

</style>
